<template>
	<view>
		<nav-bar></nav-bar>
		<view class="login">
			<view class="login-info">
				<view class="title">
					<view class="name">欢迎登录</view>
				</view>
				<view class="icon iconfont iconyonghutouxiang denglu">
					<input placeholder-class="input-text" class="input-class" v-model="userName" type="text"
						placeholder="请输入姓名" @blur="onBlurUser">
				</view>
				<view class="icon iconfont iconmima mima">
					<input placeholder-class="input-pw" class="input-class" v-model="passWord" type="password"
						placeholde="请输入密码" @blur="onBlurPW">
				</view>
				<view class="btn-in" @tap="onSubmin">
					<button class="btn" type="default">登录</button>
				</view>

			</view>
			<view class="icon iconfont iconkaiji" @click="$refs.popup.open()"></view>
		</view>
		<uni-popup ref="popup" type="center">
			<switch-log @onCQ="onCQ" @onClose="$refs.popup.close()"></switch-log>
		</uni-popup>
	</view>
</template>

<script>
	const module = uni.requireNativePlugin('uniplugin_module-release')
	import {
		mapState
	} from 'vuex'
	import {
		loadLogin,
		getCabinet
	} from '../../utils/api.js'
	import NavBar from '../../components/common/nav-bar.vue'
	import SwitchLog from '../../components/login/switch.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup-message/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup-dialog/uni-popup-dialog.vue'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniNavBar,
			SwitchLog,
			NavBar
		},
		computed: {
			...mapState(['mainCabinet'])
		},
		data() {
			return {
				userName: 'scTest1', //明文输入框value
				passWord: '123456' // 密码输入框value
			}
		},
		onLoad() {},
		methods: {
			onBlurUser() {
				if (this.userName.trim() == "" && this.userName == undefined) {
					uni.showToast({
						title: '名字不能为空！',
						position: "top"
					})
					this.userName = ''
					return;
				} else if (this.userName.length > 7) {
					uni.showToast({
						title: '名字最长不能超过7位！',
						position: "top"
					})
					this.userName = ''
					return;
				}
			},
			onBlurPW() {
				if (this.passWord.length < 6) {
					uni.showToast({
						title: '密码不能少于6位！',
						position: "top"
					})
					this.passWord = ''
					return;
				} else if (this.passWord.length > 16) {
					uni.showToast({
						title: '密码最长不能超过16位！',
						position: "top"
					})
					this.passWord = ''
					return;
				} else if (this.passWord.trim() == '' && this.passWord == undefined) {
					uni.showToast({
						title: '密码不能为空！',
						position: "top"
					})
					this.passWord = ''
					return;
				}
			},
			onSubmin() {
				try {
					if(store.state.inventory_transaction_num!=0){
						uni.showToast({
						    title: "正在盘点，请稍等",
						    duration: 5000,
							mask:true
						});
					}
					module.readInputRegisters({ //读取状态
						'saveId': 1,
						'start': 0,
						'len': 4
					}, (InputRes1) => {
						console.log(InputRes1)
						console.log(this.mainCabinet.door_id - 1)
						if (!InputRes1.data[this.mainCabinet.door_id - 1]) {
							uni.showToast({
								title: '请先关门...'
							})
							return
						}
						let token = null
						uni.showToast({
							mask:true,
							title: '登录中...'
						})
						console.log(this.mainCabinet)
						loadLogin({
							loginMode: 0, //登录模式：0-账户/密码；1-指纹；2-刷卡
							userName: this.userName, //用户名，如果非账户/密码登录，可为空
							password: this.passWord, //密码；如果非账户/密码登录，可为空
							phoneNumber: this.userName, //用户名、手机号选择之一。
							fPFeature: '', //指纹特征数据，指纹登录时必填
							cardNumber: '', //卡号，刷卡登录；刷卡登录时必填
							terminalId: this.mainCabinet.terminalId
						}).then(res => {
							console.log(res.data);
							if (res.data.userId) {
								uni.showToast({
									title: '登录成功',
									image: '../../static/chenggong1.png',
									success: () => {
										//获取柜子基础信息
										getCabinet({
											terminalId: this.mainCabinet.terminalId
										}).then(re => {
											console.log(re)
											let tokenData = {}
											Object.assign(tokenData, this.mainCabinet,
												res.data, re.data);
											console.log(tokenData)
											tokenData.time = (new Date()).getTime()
											this.$store.dispatch('open_door', this
												.mainCabinet.door_id)
											this.$store.dispatch('setToken', tokenData)
											uni.redirectTo({
												url: `../index/index`
											})
										})
									}
								})
							}
						})

					})


				} catch (err) {
					console.log(err, 1111111);
					uni.showToast({
						title: '用户名或密码错误'
					})
				}
			},
			onCQ() {
				uni.redirectTo({
					url: "../welcome-login/welcome-login"
				})
			}

		}
	}
</script>

<style scoped lang="less">
	.input-class {
		color: #777777;
		font-size: 48rpx;
		margin-left: 40rpx;
	}

	.login {
		display: flex;
		justify-content: center;
		position: relative;
		background: url(../../static/background3.jpg) no-repeat;
		background-size: cover;
		// height: 385rpx;
		// height: 1384rpx;
		height: calc(100vh - 72px);

		.login-info {
			position: relative;
			z-index: 3;

			.title {
				// margin-top: 220rpx;
				// margin-bottom: 146rpx;
				margin-top: 17vh;
				margin-bottom: 10vh;
				text-align: center;

				.name {
					color: #FFFFFF;
					font-size: 80rpx;
					letter-spacing: 16rpx;
				}
			}

			.denglu {
				display: flex;
				align-items: center;
				border: 1rpx solid #4FC3FD;
				border-radius: 124rpx;
				margin-bottom: 80rpx;
				background: #FFFFFF;
				width: 940rpx;
				height: 124rpx;

				.input-text {
					font-size: 48rpx;
					color: #BBBBBB;
				}
			}

			.iconyonghutouxiang {
				padding-left: 60rpx;
				color: #6BBCFF;
				font-size: 60rpx;
			}

			.mima {
				display: flex;
				align-items: center;
				border: 1rpx solid #4FC3FD;
				border-radius: 124rpx;
				margin-bottom: 140rpx;
				background: #FFFFFF;
				width: 940rpx;
				height: 124rpx;

				.input-pw {
					font-size: 48rpx;
					color: #BBBBBB;
				}
			}

			.iconmima {
				padding-left: 60rpx;
				color: #6BBCFF;
				font-size: 60rpx;

			}

			.btn-in {
				display: flex;
				justify-content: center;
				align-items: center;

				// margin-bottom: 82rpx;
				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(11deg, rgba(255, 184, 122, 1), rgba(251, 121, 89, 1), rgba(255, 154, 114, 1));
					color: #FFFFFF;
					width: 600rpx;
					height: 150rpx;
					border-radius: 128rpx;
					font-size: 68rpx;
				}

			}
		}

		.iconkaiji {
			position: absolute;
			// left: 64rpx;
			// bottom: 52rpx;
			left: 5vh;
			bottom: 5vh;
			color: #FFFFFF;
			font-size: 75rpx;
			z-index: 2;
		}

	}
</style>
